<template>
  <div class="app-container" style="width: 1020px;height: 600px">
    <el-dialog title="商品选择器" class="myDialog" :show-close="false" :visible.sync="open"  width="1030px" style="padding: 0" append-to-body>
      <el-row :gutter="20">
        <!--文件目录-->
        <el-col :span="4" :xs="24" >
          <div class="head-container">
            <el-input
              v-model="className"
              placeholder="分类名称"
              clearable
              size="small"
              prefix-icon="el-icon-search"
              style="margin-bottom: 20px"
            />
          </div>
          <div class="head-container">
            <el-tree
              :data="classOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              default-expand-all
              @node-click="handleNodeClick"
            />
          </div>
        </el-col>
        <!--商品数据-->
        <el-col :span="20" :xs="24">
          <el-row :gutter="10" class="mb8">
            <el-col :span="24" >
                <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" style="display: inline-block;vertical-align: middle" label-width="68px" >
                  <el-form-item label="" prop="name" style="margin-bottom: 0" >
                    <el-input
                      v-model="queryParams.name"
                      placeholder="请输入商品名称"
                      clearable
                      size="small"
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>
                  <el-form-item style="margin-bottom: 0" >
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                  </el-form-item>
                </el-form>
            </el-col>
          </el-row>
          <el-row style="height: 480px">
            <el-col class="picture"  v-for="(item,index) in goodsList" :key="index" :style="checkedGoods.indexOf(item.id)>-1?'border-color: #1890FF':''"  >
              <div v-if="checkedGoods.indexOf(item.id)>-1" style="position: absolute;right: -17px;top: -7px;width: 46px;height: 26px;background: #1890FF;text-align: center;transform: rotate(45deg);box-shadow: 0 1px 1px #ccc;z-index: 9" >
                <i class="el-icon-check" style="font-size: 12px;color:white;margin-top: 12px;transform: rotate(-45deg);"></i>
              </div>
              <div v-if="checkedGoods.indexOf(item.id)>-1" style="position: absolute;left: 0px;top: 0px;width: 20px;height: 26px;line-height:26px;background: #D9F3FE;color:#1890FF;text-align: center;z-index: 9;" >
                {{ checkedGoods.indexOf(item.id)+1 }}
              </div>
              <el-image  :src="baseUrl+item.picturePath" style="height: 150px;width: 150px" @click="handleCheckedFileChange(item.id)" > </el-image>
              <div style="margin-top: 5px">
                <span style="display:inline-block;width:100%;padding-left:4%;padding-top:2px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 14px;color: #606266">{{ item.goodsCode }}</span>
                <span style="display:inline-block;width:100%;padding-left:4%;padding-top:5px;font-size: 13px;color: #606266">{{ item.name }}</span>

              </div>
            </el-col>
          </el-row>
          <el-row v-show="total>0">
            <pagination
              style="padding: 0!important;margin: 0!important;"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </el-row>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <span v-if="multiple == -1 " style="font-size: 12px;margin-right: 20px ">已选{{ checkedGoodsList.length }}个</span>
        <span v-else style="font-size: 12px;margin-right: 20px ">已选{{ checkedGoodsList.length }}个/可选{{multiple}}个</span>
        <el-button @click="submitSelector" type="primary" >确 定</el-button>
        <el-button @click="cancel" >取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {listGoodsClass} from "@/api/goods/goodsClass";
import {listGoods} from "@/api/goods/goods";

export default {
  name: "GoodsSelector",
  components: {
    Treeselect
  },
  props: {
    open:{
      type: Boolean,
      default: false
    },
    multiple: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      checked:false,
      baseUrl: process.env.VUE_APP_BASE_API,
      defaultProps: {
        children: "children",
        label: "className"
      },
      // 总条数
      total: 0,
      // 商品列表
      goodsList: [],
      classOptions:[],
      // 文件夹名称
      className: undefined,
      //选中商品id集合
      checkedGoods: [],
      //选中的文件对象集合
      checkedGoodsList:[],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name:null,
        goodsClassId: null
      }
    };
  },
  watch: {
    // 根据名称筛选文件夹树
    className(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.getGoodsClassList();
    this.getList();
  },
  methods: {
    /** 查询图片管理列表 */
    getList() {
      this.loading = true;
      listGoods(this.queryParams).then(response => {
        this.goodsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //商品分类
    getGoodsClassList() {
      listGoodsClass({status:0}).then(response => {
        this.classOptions = this.handleTree(response.data, "id");
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.className.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.goodsClassId = data.id;
      this.getList();
    },
    // 表单重置
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.goodsClassId = null;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleCheckedFileChange(id) {
      //判断有没有
      const findex = this.checkedGoods.indexOf(id);
      if(findex>-1){
        this.checkedGoods.splice(findex, 1);
        this.checkedGoodsList.forEach((item,index)=>{
          if(item.id === id){
            this.checkedGoodsList.splice(index,1);
          }
        })
      }else {
        if(this.multiple == -1 || this.checkedGoods.length < this.multiple){
          this.checkedGoods.push(id)
          this.checkedGoodsList.push(this.goodsList.find(item => item.id ===  id))
        }
      }
      let checkedCount = this.checkedGoods.length;
      this.checkAll = checkedCount === this.goodsList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.goodsList.length;

    },
    //取消
    cancel(){
      this.checkedGoods=[];
      this.checkedGoodsList= [];
      this.$emit('close', false)
    },
    /** 确认图片选择 */
    submitSelector(){
      //传到父组件
      this.$emit('input', this.checkedGoodsList)
      this.$emit('close', false)
      this.checkedGoods=[];
      this.checkedGoodsList= [];
    }
  }
};
</script>

<style lang="scss" scoped>
  .picture {
    width: 152px;
    height:230px;
    margin-right:10px;
    margin-bottom:10px;
    border: 1px solid #DCDFE6;
    position: relative;
    overflow: hidden
  }
  .picture input{
    font-size: 14px;
    margin-left: 5px;
    width:75% ;
    margin-top: -5px;
    height: 30px ;
    line-height: 30px
  }
</style>
